import { Link, RepoLink } from '@brillout/docpress'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="client, server"
  cumulative
  global
/>

Hook called when the <Link href="/globalContext">`globalContext` object</Link> is created.

```ts
// pages/+onCreateGlobalContext.ts
// Environment: server & client

import type { GlobalContext } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContext) {
  // The object globalContext was just created
}
```

You can define:
- `+onCreateGlobalContext.js` => called when `globalContext` is created (both client and server).
- `+onCreateGlobalContext.server.js` => called when `globalContext` is created on the server.
- `+onCreateGlobalContext.client.js` => called when `globalContext` is created on the client.
- `+onCreateGlobalContext.server.js` and `+onCreateGlobalContext.server.js` => two different `onCreateGlobalContext()` hooks for server and client.

> See also:
> - <Link href="/file-env" />
> - <Link href="/onCreatePageContext" />


## Use cases

### Init

Initializing a `globalContext` property:

```ts
// pages/+onCreateGlobalContext.client.ts
// Environment: client

import type { GlobalContextClient } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.someInstance = new Instance()
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      someInstance: Instance
    }
  }
}
```

### Global data

Fetching global data that is accessible to all pages:

```ts
// pages/+onCreateGlobalContext.server.ts
// Environment: server

import type { GlobalContextServer } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextServer) {
  globalContext.someData = await fetchSomeData()
}

declare global {
  namespace Vike {
    // Extend GlobalContext instead of GlobalContextServer because someData is passed to client
    interface GlobalContext {
      someData: Awaited<ReturnType<typeof fetchSomeData>>
    }
  }
}
```

```ts
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  passToClient: ['someData']
} satisfies Config
```

> <Link href="/passToClient" noBreadcrumb /> also works for `globalContext`.

### Authentication

Client-side authentication:

```ts
// pages/+onCreateGlobalContext.client.ts
// Environment: client

import type { GlobalContextClient } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.loggedInUser = retrieveUserFromCookie()
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      loggedInUser: ReturnType<typeof retrieveUserFromCookie>
    }
  }
}
```

> See also: <Link href="/auth#ssg" doNotInferSectionTitle />.

### Store

Initializing a <Link href="/store">store</Link> on the client-side:

```ts
// pages/+onCreateGlobalContext.client.ts
// Environment: client

import { Store } from 'some-state-management-library'
import type { GlobalContextClient } from 'vike/types'

export async function onCreateGlobalContext(globalContext: GlobalContextClient) {
  globalContext.store = new Store()
}

declare global {
  namespace Vike {
    interface GlobalContextClient {
      store: Store
    }
  }
}
```

On the server-side, the store is typically initialized by using a <Link href="/onCreatePageContext" noBreadcrumb />.

See also:
 - <Link href="/onCreatePageContext#store" />
 - <Link href="/store#manual-integration" />


## Lifecycle

See <Link href="/globalContext#lifecycle" /> which explains when the `globalContext` object is created (the `onCreateGlobalContext()` hook is called immediately afterwards).


## See also

- <Link href="/globalContext" />
- <Link href="/getGlobalContext" />
- <Link href="/onCreatePageContext" />
- <Link href="/hooks" />
- <Link href="/hooks#lifecycle" />
